<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>{{details()}}</h1>
    </div>
    <div id="vue_det2">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "菜鸟教程",
				url: "www.runoob.com",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				}
			}
		});
        var data = {site: '菜鸟教程',url: 'www.runoob.com',alexa: '10000'}
        var vm2 = new Vue({
            el: '#vue_det2',
            data: data
        });
        // 它们引用相同的对象！
        document.write(vm2.site === data.site) // true
        document.write("<br>")
        // 设置属性也会影响到原始数据
        vm.site = "Runoob"
        document.write(data.site + "<br>") // Runoob
        
        // ……反之亦然
        data.alexa = 1234
        document.write(vm.alexa) // 1234
	</script>
</body>
</html>